import $ from "jquery";
import {addDeClick} from "../function/deClick";
import {renderAreaNode} from "../function/renderAreaNode";

export default {
    data() {
        return {
            // ----------- 区划样式 -----------
            // 子节点
            subFeature: {
                cursor: 'default',
                bubble: true,
                strokeColor: '#fff', //线颜色
                strokeOpacity: 1, //线透明度
                strokeWeight: 6, //线宽
                fillColor: null,
                // fillColor: 'rgba(0, 122, 204,0)', //填充色
                fillOpacity: 0.35, //填充透明度
            },
            // 子节点被点击后
            subFeatureBeClick: {
                cursor: 'default',
                bubble: true,
                strokeColor: '#fff', //线颜色
                strokeOpacity: 1, //线透明度
                strokeWeight: 6, //线宽
                fillColor: 'rgba(0, 122, 204,1)',
                // fillColor: 'rgba(0, 122, 204,0)', //填充色
                fillOpacity: 0.35, //填充透明度
            },
            // 父节点
            ParentFeature: {
                cursor: 'default',
                bubble: true,
                strokeColor: '#fff', //线颜色
                fillColor: null,
                strokeWeight: 6, //线宽
            },
            //    ------------ 中间变量 -----------
            currentAreaNode: undefined
        }
    },
    mounted() {
        let that = this;
        AMapUI.loadUI(['geo/DistrictExplorer'], function (DistrictExplorer) {
            that.DistrictExplorer = DistrictExplorer;
            that.initPage(DistrictExplorer);
        })
    },
    methods: {
        // ------------- 基础功能 ---------------

        /**
         * 启动页面
         * @param DistrictExplorer
         */
        initPage(DistrictExplorer) {
            let that = this
            this.districtExplorer = new DistrictExplorer({
                eventSupport: true, //打开事件支持
                map: that.map,
                zIndex: 1
            });
            // -------- 绘制节点 --------------
            this.districtExplorer.loadAreaNode(this.adcode, function (error, areaNode) {
                if (error) {
                    console.error(error);
                    return;
                }
                that.renderAreaNode(areaNode, that.map);
            });
            this.addDEfunction();
        },

        /**
         * 绘制行政区节点
         * @param areaNode
         * @param map
         * @param subAdcode
         */
        renderAreaNode(areaNode, map, subAdcode = null) {

            let that = this;

            //清除已有的绘制内容
            this.districtExplorer.clearFeaturePolygons();

            //绘制子级区划
            this.districtExplorer.renderSubFeatures(areaNode, function (feature) {

                if (feature.properties.adcode === subAdcode) {
                    return that.subFeatureBeClick;
                }
                return that.subFeature;
            });

            //绘制父级区划，仅用黑色描边
            this.districtExplorer.renderParentFeature(areaNode, this.ParentFeature);
        },

        /**
         * 重新绘制节点
         */
        reRenderAreaNode() {
            this.switchAreaNode(this.adcode);
        },

        /**
         * 切换区域
         * @param adcode
         * @param callback
         */
        switchAreaNode(adcode, callback) {
            let that = this;
            if (that.currentAreaNode &&
                ('' + that.currentAreaNode.getAdcode() === '' + adcode)) {
                return;
            }

            this.loadAreaNode(adcode,
                (error, areaNode) => {

                    if (error) {

                        if (callback) {
                            callback(error);
                        }

                        return;
                    }

                    that.currentAreaNode = areaNode;

                    //设置当前使用的定位用节点
                    that.districtExplorer.setAreaNodesForLocating([that.currentAreaNode]);

                    that.refreshAreaNode(areaNode);

                    if (callback) {
                        callback(null, areaNode);
                    }
                });
        },

        /**
         * 加载节点
         * @param adcode
         * @param callback
         */
        loadAreaNode(adcode, callback) {
            let that = this
            that.districtExplorer.loadAreaNode(adcode,
                (error, areaNode) => {

                    if (error) {

                        if (callback) {
                            callback(error);
                        }

                        return;
                    }

                    if (callback) {
                        callback(null, areaNode);
                    }
                });
        },

        /**
         * 刷新区域节点
         * @param areaNode
         */
        refreshAreaNode(areaNode) {
            this.districtExplorer.setHoverFeature(null);
            this.renderAreaPolygons(areaNode);
        },

        /**
         * 渲染节点区域
         * @param areaNode
         */
        renderAreaPolygons(areaNode) {
            //更新地图视野
            // this.map.setBounds(areaNode.getBounds(), null, null, true);
            // map.setZoom(big_zoom);
            // map.setZoom(8);
            //清除已有的绘制内容
            this.districtExplorer.clearFeaturePolygons();

            //绘制子区域
            this.districtExplorer.renderSubFeatures(areaNode, () => {

                // var fillColor = colors[i % colors.length];
                // var strokeColor = colors[colors.length - 1 - i % colors.length];
                let strokeColor = '#FFFFFF';

                return {
                    cursor: 'default',
                    bubble: true,
                    strokeColor: strokeColor, //线颜色
                    strokeOpacity: 1, //线透明度
                    strokeWeight: 6, //线宽
                    fillColor: null, //填充色
                    fillOpacity: 0.35, //填充透明度
                };
            });

            //绘制父区域
            this.districtExplorer.renderParentFeature(areaNode, {
                cursor: 'default',
                bubble: true,
                strokeColor: '#FFFFFF', //线颜色
                strokeOpacity: 1, //线透明度
                strokeWeight: 6, //线宽
                fillColor: null, //填充色
                fillOpacity: 0.35, //填充透明度
            });
        },
        // ----------- 功能 ---------------

        /**
         * 鼠标划过提示功能
         */
        addTipmark() {
            let that = this;
            // 提示文本容器
            let tipMarkerContent = $(
                '<div style="color:white;font-size:25px;width:10vw"></div>'
            );
            let tipMarker = new AMap.Marker({
                content: tipMarkerContent.get(0),
                offset: new AMap.Pixel(0, 0),
                bubble: true,
                zIndex: 5,
            });
            //监听feature的hover事件
            this.districtExplorer.on("featureMouseout featureMouseover", function (e, feature) {
                toggleHoverFeature(
                    feature,
                    e.type === "featureMouseover",
                    e.originalEvent ? e.originalEvent.lnglat : null
                );
            });
            //监听鼠标在feature上滑动
            this.districtExplorer.on("featureMousemove", function (e) {
                //更新提示位置
                tipMarker.setPosition(e.originalEvent.lnglat);
            });

            // ------- 鼠标滑过提示 --------------
            function toggleHoverFeature(feature, isHover, position) {

                tipMarker.setMap(isHover ? that.map : null);

                if (!feature) {
                    return;
                }

                let props = feature.properties;
                if (isHover) {
                    //更新提示内容
                    tipMarkerContent.html(props.name);
                    //更新位置
                    tipMarker.setPosition(position ? position : props.center);
                }
            }
        },

        /**
         * 行政区下钻
         */
        addGoInside() {
            let that = this;

            // feature被点击
            this.districtExplorer.on(
                'featureClick',
                (e, feature) => {
                    let props = feature.properties;
                    switchAreaNode(props.adcode);
                    if (props.childrenNum === 0) {
                        that.map.setZoom(that.zoom);
                        that.map.setCenter(props.center);
                    }
                });

            // feature 外侧被点击
            this.districtExplorer.on('outsideClick', e => {

                that.districtExplorer.locatePosition(
                    e.originalEvent.lnglat,
                    (error, routeFeatures) => {

                        let prop = routeFeatures[1].properties;

                        if (routeFeatures &&
                            routeFeatures.length > 1 &&
                            prop.adcode === that.adcode) {
                            //切换到省级区域
                            that.switchAreaNode(routeFeatures[2].properties.adcode);
                        } else {
                            //切换到全国
                            that.switchAreaNode(that.adcode);
                        }

                    });

            });

            function switchAreaNode(adcode, callback) {

                if (that.currentAreaNode &&
                    ('' + that.currentAreaNode.getAdcode() === '' + adcode)) {
                    return;
                }

                loadAreaNode(adcode,
                    (error, areaNode) => {

                        if (error) {

                            if (callback) {
                                callback(error);
                            }

                            return;
                        }

                        that.currentAreaNode = areaNode;

                        //设置当前使用的定位用节点
                        that.districtExplorer.setAreaNodesForLocating([that.currentAreaNode]);

                        refreshAreaNode(areaNode);

                        if (callback) {
                            callback(null, areaNode);
                        }
                    });
            }

            function loadAreaNode(adcode, callback) {

                that.districtExplorer.loadAreaNode(adcode,
                    (error, areaNode) => {

                        if (error) {

                            if (callback) {
                                callback(error);
                            }

                            return;
                        }

                        if (callback) {
                            callback(null, areaNode);
                        }
                    });
            }

            function refreshAreaNode(areaNode) {

                that.districtExplorer.setHoverFeature(null);

                renderAreaPolygons(areaNode);
            }

            function renderAreaPolygons(areaNode) {
                //更新地图视野
                that.map.setBounds(areaNode.getBounds(), null, null, true);
                // map.setZoom(big_zoom);
                // map.setZoom(8);
                //清除已有的绘制内容
                that.districtExplorer.clearFeaturePolygons();

                //绘制子区域
                that.districtExplorer.renderSubFeatures(areaNode, () => {

                    // var fillColor = colors[i % colors.length];
                    // var strokeColor = colors[colors.length - 1 - i % colors.length];
                    let strokeColor = '#FFFFFF';

                    return {
                        cursor: 'default',
                        bubble: true,
                        strokeColor: strokeColor, //线颜色
                        strokeOpacity: 1, //线透明度
                        strokeWeight: 6, //线宽
                        fillColor: null, //填充色
                        fillOpacity: 0.35, //填充透明度
                    };
                });

                //绘制父区域
                that.districtExplorer.renderParentFeature(areaNode, {
                    cursor: 'default',
                    bubble: true,
                    strokeColor: '#FFFFFF', //线颜色
                    strokeOpacity: 1, //线透明度
                    strokeWeight: 6, //线宽
                    fillColor: null, //填充色
                    fillOpacity: 0.35, //填充透明度
                });

            }
        },

        /**
         * 区域点击，抛出adcode事件
         */
        addDeClick() {
            let that = this;
            this.districtExplorer.on("featureClick outsideClick", (e, feature) => {
                if (feature === null) {

                    that.districtExplorer.loadAreaNode(that.adcode, (error, areaNode) => {
                        if (error) {
                            console.error(error);
                            return;
                        }
                        that.renderAreaNode(areaNode, that.map);
                    });

                    that.$emit("mapBeClick", undefined);
                    return 0
                }

                let subAdcode = feature.properties.adcode;

                that.districtExplorer.loadAreaNode(that.adcode, (error, areaNode) => {
                    if (error) {
                        console.error(error);
                        return;
                    }
                    that.renderAreaNode(areaNode, that.map, subAdcode);
                });

                that.$emit("mapBeClick", subAdcode);
            });
        },

    }
}